<template>
  <div id="pop">
      <!--   任务名称   -->
      <div class="popInput">
        <label>任务名称：</label>
        <input type="text" v-model="formDat.missionName">
      </div>
      <!--  上传HTML文件  -->
      <div class="popInput">
        <label>上传html：</label>
        <el-upload
            class="upload-encrypt"
            ref="upload"
            action="http://127.0.0.1:8081/doHide"
            :with-credentials="true"
            :on-success="uploadSuccess"
            :before-upload="beforeUpload"
            :limit="1"
            :data="formDat"
            :auto-upload="false">
          <img class="upload" slot="trigger" src="~assets/images/upload.svg">
        </el-upload>
      </div>
      <!--   加密内容   -->
      <div class="popInput">
        <label>加密类容：</label>
        <el-upload
            class="upload-encrypt"
            ref="upload"
            action="http://127.0.0.1:8081/doHide"
            :limit="1"
            :auto-upload="false" v-if="upFile">
          <img class="upload" slot="trigger" src="~assets/images/upload.svg">
        </el-upload>
        <input type="text" v-else v-model="formDat.encryptContext">
<!--        <img class="change-img" @click="changeType" src="~assets/images/change.svg">-->
      </div>
      <!--  加密类型  -->
      <div class="popInput">
        <label>加密类型：</label>
        <el-select v-model="formDat.type" placeholder="请选择">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </div>
      <!--  提交按钮  -->
      <div class="popInput">
        <input type="button" value="确定" @click="submitAll">
        <input type="button" @click="closePop" value="取消">
      </div>
  </div>
</template>

<script>
import http from "@/util/request";

export default {
  name: "Pop",
  props:{

  },
  data(){
    return{
      upFile: false,
      formDat:{
        missionName:'',
        encryptContext:'',
        type: '0'
      },
      options:[
        {
          value: '0',
          label: '基于等号隐藏'
        },
        {
          value: '1',
          label: '基于属性值隐藏'
        }
      ]
    }
  },
  methods: {
    closePop(){
      this.$emit('close','encryptDialogVisible');
    },
    changeType(){
      this.upFile = !this.upFile;
    },
    submitAll(){
      this.$refs.upload.submit();
    },
    uploadSuccess(response, file, fileList){
      if(response == true){
        this.$store.commit("change", 1);
        this.$emit('close','success');
      } else if(response == false){
        this.$alert('未知错误',{confirmButtonText: '确定'});
      } else{
        this.$alert(response,{confirmButtonText: '确定'});
      }
    },
    beforeUpload(){
      return new Promise((resolve,reject)=>{
        http.get('/missionIsExist?missionName='+this.formDat.missionName,{})
            .then((response)=> {
              //获取服务器返回的查询结果
              let isExist = response.data;
              if(isExist){
                this.$alert('任务名称已经存在,请更换任务名',{confirmButtonText: '确定'});
                reject();
              }else{
                resolve();
              }
        });
      })
    }
  }
}
</script>

<style scoped>
#pop {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
}

.popInput {
  padding: 0 20px 0 16%;
  margin:0 0 20px 0;
  display: flex;
  align-items: center;
  position: relative;
}

.change-img {
  width: 30px;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 10%;
}

.popInput input,select{
  width: 50%;
  padding: 5px 20px;
  background: rgba(255, 255, 255, 0.2);
  outline: none;
  border: none;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 16px;
  letter-spacing: 1px;
  /*color: #fff;*/
  box-shadow: 0 5px 15px rgb(0 0 0 / 5%);
}

.popInput input[type="button"] {
  width : 40%;
  margin: 20px 0 0 8%;
  background: #fff;
  color: #666;
  max-width: 100px;
  font-weight: 600;
  cursor: pointer;
}

.upload {
  height: 27px;
  position: absolute;
  right: 25%;
  top: 0;
  margin-left: 20px;
  cursor: pointer;
}

.upload-encrypt {
  display: flex;
  flex-direction: row-reverse;
}

</style>
